<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="明月">
    <title></title>
    <style>
        main {
            width: 200px;
            background-color: #fff;
            margin: 0 auto;
            border: 1px solid #aaa;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
        }
        section{
           position: relative;
             overflow: hidden; 
            margin: 10px 0; 
        }
        li {
            margin: 0 10px;
        }

        h2 {
            text-align: center;
        }

        .one {
            position: relative;
        }

        .two {
            position: relative;
        }

        div {
            width: 180px;
            height: 25px;
            position: absolute;
            background-color: pink;
            left: 10px;
            bottom: 0;
            text-align: center;
        }

           .one-text {
             bottom:0; 
        }

        .two-text {
           bottom: -25px;
        }   
    </style>
</head>

<body>
    <main>
        <h2 style="background-color: #aaa;margin-top:0;">专辑推荐</h2>
    <section>
            <ul>
            <li class="one"><a href="#"><img src="img/1_1.jpg" alt=""></a></li>
            <li class="two"><a href="#"><img src="img/1_2.jpg" alt=""></a></li>
            <div class="one-text">COCOON/可可尼</div>
            <div class="two-text">几何为网-极致绚烂</div>
        </ul>
    </section>
    <section>
            <ul>
            <li class="one"><a href="#"><img src="img/2_1.jpg" alt=""></a></li>
            <li class="two"><a href="#"><img src="img/2_2.jpg" alt=""></a></li>
            <div class="one-text" style=" background-color: skyblue;">INSUN/恩裳</div>
            <div class="two-text" style=" background-color: skyblue;">2017春印象</div>
        </ul>
    </section>
    <section>
            <ul>
            <li class="one"><a href="#"><img src="img/3_1.jpg" alt=""></a></li>
            <li class="two"><a href="#"><img src="img/3_2.jpg" alt=""></a></li>
            <div class="one-text" style=" background-color: green;">JNBY/江南布衣</div>
            <div class="two-text" style=" background-color: green;">NANMENG</div>
        </ul>
    </section>
    </main>
    <script src="./jquery.js"></script>
</body>

</html>
<script>
    $('ul').mouseover(function () {
        $(this).find('.one-text').stop().animate({
            bottom:-25
        }, 1000);
        $(this).find('.two-text').stop().animate({
            bottom:0 
        }, 1000);
         $(this).find('.one').stop().animate({
            left: -200
        }, 1000);
         $(this).find('.two').stop().animate({
            left: -200
        }, 1000);
    });
    $('ul').mouseout(function () {
         $(this).find('.one-text').stop().animate({
            bottom:0
        }, 1000);
         $(this).find('.two-text').stop().animate({
            bottom:-25
        }, 1000);
         $(this).find('.one').stop().animate({
            left: 0
        }, 1000);
         $(this).find('.two').stop().animate({
            left: 0
        }, 1000);
    });

</script>